<template>
  <van-skeleton title avatar :row="3" :loading="props.loading" v-for="user in props.userList">
    <van-card :thumb="user.avatarUrl">
      <template #title>
        {{ user.username }}（{{ user.planetCode }}）
      </template>

      <template #desc>
        <div style="white-space: normal; word-break: break-word; margin-top: 5px; color: gray">
          {{ user.profile }}
        </div>
      </template>
      <template #tags>
        <van-tag plain type="primary" v-for="tag in user.tags" style="margin-right: 10px; margin-top: 10px">
          {{ tag }}
        </van-tag>
      </template>
      <template #footer>
        <van-button style="width: 60px; height: 30px" size="small">打招呼</van-button>
      </template>
    </van-card>
  </van-skeleton>
</template>

<script setup lang="ts">

import type {UserType} from "../models/user";

interface UserCardListProps {
  loading: boolean;
  userList: UserType[];
}

const props = withDefaults(defineProps<UserCardListProps>(), {
  loading: true,
  // @ts-ignore
  userList: [] as UserType[],
});

</script>

<style scoped>

</style>
